<template>
  <div>
    楼信息
    <el-button type="text"  style="float: right" @click="getFloor">选择楼栋</el-button>
    <!--    弹出层开始-->

    <el-dialog title="选择楼栋" :visible.sync="stepOnePop" width="30%">
      <el-row>
        <el-col :span="24" :xs="24">
          <el-form :model="query" ref="ruleForm" label-width="80px" class="demo-ruleForm">
            <el-form-item label="楼栋名称" prop="name">
              <el-input v-model="query.name" placeholder="请输入楼栋名称" size="small" style="width: 100%;"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" :xs="24">
          <el-table :data="floorList" highlight-current-row>
            <el-table-column prop="id" label="楼栋ID" width="100px"></el-table-column>
            <el-table-column prop="name" label="楼名称" width="150px"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column label="操作" width="100px" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="xuanze(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!--      分页开始-->
      <el-pagination
        small
        style="float: right"
        :current-page="query.pageNum"
        :page-size="query.pageSize"
        layout="prev, pager, next"
        :total="total"
        :page-sizes="[5]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
      <!--      分页结束-->
    </el-dialog>
    <!--    弹出层结束-->
    <el-divider></el-divider>
    <!--    楼栋信息开始-->
    <el-row style="padding-left: 50px;padding-right: 50px;padding-bottom: 40px">
      <el-col :span="6">
        <span class="zitiyangshi">楼栋ID:</span> <span class="neirong">{{floor.id}}</span>
      </el-col>
      <el-col :span="6">
        <span class="zitiyangshi">名称:</span> <span class="neirong">{{ floor.name }}</span>
      </el-col>
      <el-col :span="6">
        <span class="zitiyangshi">建筑面积:</span> <span class="neirong">{{ floor.floorArea }}</span>
      </el-col>
      <el-col :span="6">
        <span class="zitiyangshi">创建时间:</span> <span class="neirong">{{ floor.createTime }}</span>
      </el-col>
    </el-row>
    <el-row style="padding-left: 50px;padding-right: 50px;">
      <el-col :span="6">
        <span class="zitiyangshi">楼描述:</span> <span class="neirong">{{ floor.remark }}</span>
      </el-col>
    </el-row>
    <!--    楼栋信息结束-->
  </div>
</template>

<script>
import {queryFloor} from '@/api/village/floor'
export default {
  props:['getFloorId'],
  data(){
    return{
      // total总数
      total: 0,
      // 楼栋弹窗
      stepOnePop: false,
      // 选中的楼栋
      floor:{
        id:undefined,
        name:undefined,
        floorArea:undefined,
        createTime:undefined,
        remark:undefined
      },
      // 楼栋所有数据
      floorList:[],
      // 模糊查询条件
      query:{
        pageNum:1,
        pageSize:10,
        name:undefined
      }
    }
  },
  methods:{
    xuanze(floor){
      this.floor = floor
      this.stepOnePop = false
      this.getFloorId(floor.id)
    },

    /**
     * 模糊查询
     */
    getFloor(){
      this.stepOnePop = true
      const query = {
        pageNum:this.query.pageNum,
        pageSize:this.query.pageSize,
        name:this.query.name
      }
      queryFloor(query).then(res =>{
        this.floorList = res.data.records
      })
    },

    handleSizeChange(val){
      this.query.pageSize = val
      this.getFloor()
    },
    handleCurrentChange(val){
      this.query.pageNum = val
      this.getFloor()
    }

  },
  watch:{
    'query.name':{
      handler(newVal,oldVal){
        this.query.pageNum = 1
        this.getFloor()
      },
      deep:true
    },
  }
}
</script>

<style scoped>
.zitiyangshi{
  color : #686B6D; /*文字颜色*/
  font-weight:bold; /*文字粗体*/
  font-family : 宋体,sans-serif; /*文字字体*/
  font-size:20px;
  height:36px;
}
.neirong{
  margin: 0 5px;
  color : #999999; /*文字颜色*/
  font-weight:bold; /*文字粗体*/
  font-family : 宋体,sans-serif; /*文字字体*/
  font-size:15px;
  height:36px;
}
</style>
